<template>
  <div class="log-page">
    <!-- 查询条件 -->

    <el-card class="box-card">
      <h3>查询条件</h3>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="操作账号：">
          <el-input v-model="searchForm.uname" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              unlink-panels
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 日志列表 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <h3>日志列表</h3>
      <div style="margin-bottom: 10px;">
        <el-button type="danger" icon="Delete" @click="onDelete">删除</el-button>
      </div>

      <el-table
          :data="logList"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="id" label="日志ID" width="100" />
        <el-table-column prop="uname" label="操作账号" width="120" />
        <el-table-column prop="optTime" label="操作时间" width="180" />
        <el-table-column prop="urole" label="角色" width="120" />
        <el-table-column prop="ipaddress" label="IP地址" width="150" />
        <el-table-column prop="optName" label="操作记录" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :total="total"
            layout="total, prev, pager, next, sizes, jumper"
            :page-sizes="[5, 10, 20, 50]"
            background
            @current-change="handlePageChange"
            @size-change="handlePageSizeChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import {ElMessage, ElMessageBox} from 'element-plus'

const searchForm = ref({
  uname: '',
  dateRange: [],
})

const logList = ref([]) // 后台返回的日志数据
const total = ref(0) // 总记录数

const pagination = ref({
  currentPage: 1,
  pageSize: 10,
})

// 查询日志列表
const fetchLogList =  () => {
  // try {
    const { currentPage, pageSize } = pagination.value
    axios.post(`/sys_log_opt/getLogList/${currentPage}/${pageSize}`, {

        uname: searchForm.value.uname|| undefined,
        startTime: searchForm.value.dateRange[0] || undefined,
        endTime: searchForm.value.dateRange[1] || undefined,

    }).then(resp=>{
      logList.value = resp.data.records;
      console.log(logList.value);
      total.value = resp.data.total;
    })
}

// 查询按钮点击
const onSearch = () => {
  pagination.value.currentPage = 1;

  fetchLogList()
}

// 重置查询条件
const onReset = () => {
  searchForm.value.uname = ''
  searchForm.value.dateRange = []
  onSearch()
}

// 分页变化
const handlePageChange = (newPage) => {
  pagination.value.currentPage = newPage
  fetchLogList()
}
const handlePageSizeChange = (newSize) => {
  pagination.value.pageSize = newSize
  pagination.value.currentPage = 1
  fetchLogList()
}

// 多选项变化
const selectedLogs = ref([])
//
const handleSelectionChange = (selection) => {
  selectedLogs.value = selection
}

// 删除（模拟）

const onDelete = () => {
  if (selectedLogs.value.length === 0) {
    ElMessage.warning('请选择要删除的日志')
    return
  }
  const ids = selectedLogs.value.map(log => log.id);
  ElMessageBox.confirm(
      '此操作将永久删除所选日志，是否继续？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.post("/sys_log_opt/deleteLogs", ids).then(resp => {
          if (resp.data) {
            ElMessage.success('删除成功');
            fetchLogList(); // 重新拉取日志列表
          } else {
            ElMessage.error('删除失败');
          }
        }).catch(() => {
          ElMessage.error('请求失败，请稍后重试');
        });
      })
      .catch(() => {
        ElMessage.info('已取消删除');
      });
}


// 初始化加载
onMounted(() => {
  fetchLogList()
})
</script>

<style scoped>
.log-page {
  padding: 20px;
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
